@charset "UTF-8";
// @import "~@/assets/css/word.scss";

// 默认
$color: #000; // 默认颜色
$font-size: 14px; // 字号
$line-height: 2; // 行间距
$line-default: $font-size * $line-height; // 行高

// A4纸
$a4-width: 794px;
$a4-height: 1123px;
$a4-p-hor: 65px;
$a4-p-ver: 73px;

// 页面布局
.word-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 1200px;
  margin: 20px auto;
}

// 条款库布局
.clause-container {
  position: sticky;
  top: 0;
  right: 0;
  z-index: 2;
  width: 380px;
  padding: 10px 20px;
  background-color: #fff;

  height: calc(100vh - 61px - 20px);
  overflow-x: hidden;
  overflow-y: auto;
}

// A4纸
.a4 {
  width: $a4-width;
  // height: $a4-height;
  padding: $a4-p-hor $a4-p-ver;
  font-family: SimSun;
  font-size: $font-size; // 四号
  line-height: $line-height;
  color: $color;
  background-color: #fff;

  .el-form-item__label {
    color: $color;
  }
}
// 一个段落
.word-content {
  position: relative;
  &:hover {
    > .edit-content {
      display: block;
    }
  }
}

// 标题
.word-title-1 {
  font-size: 21px;
  @extend .text-bold, .text-center;
}
.word-title-2 {
  font-size: $font-size;
  @extend .text-bold;
}
.word-title-3 {
  font-size: 21px;
}
.word-text {
  position: relative;
}

// 字体处理
.text-bold   { font-weight: bold; }
.text-normal { font-weight: normal; }

.text-underline {
  display: inline-block;
  width: 100px;
  height: $line-default;
  border-bottom: 1px solid $color;
}

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-indent { text-indent: 2em;}

// 填空
.text-input {
  display: inline-block;
  min-width: 100px;
  line-height: $line-default;
  // text-decoration: underline;
  border: none;
  border-bottom: 1px solid $color;
}

.edit-content {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  // background-color: rgba($color: #000000, $alpha: 0.5);
  background-color: rgba($color: #8487A8, $alpha: 0.2);
  .edit-content_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 28px;
  }
}

// 换行
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}
.text-multi-ellipsis--l2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}
.text-multi-ellipsis--l3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}
